import { Popup } from '@nutui/nutui-react-taro';
import { Image, View } from '@tarojs/components';
import WarningImg from '@/static/images/icon/warning.png';
import GreenCheckmarkImg from '@/static/images/icon/green-checkmark.png';
import ImageConstant from '@/constant/ImageConstant';
import './index.less';

interface IProps {
  className?: string;
  visible: boolean;
  onClose?: Function;
  onConfirm?: Function;
  phone: string;
}

export default function GetPhoneNumberPopup(props: IProps) {

  const {
    className,
    visible,
    onClose,
    onConfirm,
    phone
  } = props;

  /**
   * 处理手机私密
   */
  const handlePhonePrivacy = () => {
    const prefix = phone.slice(0, 3);
    const suffix = phone.slice(phone.length - 4, phone.length);
    return `${ prefix }****${ suffix }`;
  };

  /**
   * 处理popup关闭
   */
  const handlePopupClose = () => {
    onClose && onClose();
  };

  /**
   * 处理popup确认
   */
  const handlePopupConfirm = () => {
    onConfirm && onConfirm();
  };

  return (
    <Popup
      position='bottom'
      visible={ visible }
      onClose={ handlePopupClose }
      className={ `login-popup ${ className }` }
    >
      <View className='brand'>
        <Image src={ ImageConstant.LOGO } className='brand-icon'/>
        <View className='brand-title font-bold'>Mini House</View>
        <Image src={ WarningImg } className='brand-warn'/>
      </View>
      <View className='explain'>
        <View className='explain-title font-bold'>申请获取你的手机号</View>
        <View className='explain-body'>为了更好的服务客户</View>
      </View>
      <View className='phone'>
        <View className='phone-number font-bold'>{ handlePhonePrivacy() }</View>
        <View className='phone-explain'>微信绑定号码</View>
        <Image className='phone-icon' src={ GreenCheckmarkImg }/>
      </View>
      <View className='other'>使用其他手机号码</View>
      <View className='btn-popup'>
        <View
          className='btn-reject font-bold'
          onClick={ handlePopupClose }
        >
          拒绝
        </View>
        <View className='btn-allow font-bold' onClick={ handlePopupConfirm }>
          允许
        </View>
      </View>
    </Popup>
  );
}